<template>
  <div class="collectionSlide">
    <div class="img">
      <van-image
        width="360px"
        height="auto"
        lazy-load
        radius="10px 10px 0 0"
        :src="collection.model.resource.articles[0].cover"
      />
      <div class="countBox">
        <div>
          {{ collection.model.resource.count.count_comment | formatter }}
          &nbsp;评论
        </div>
        <div class="line">|</div>
        <div>
          {{ collection.model.resource.count.count_view | formatter }}
          &nbsp;观看
        </div>
        <div class="line">|</div>
        <div>
          {{ collection.model.resource.duration | time }}
        </div>
      </div>
    </div>
    <div class="buttom">
      <div class="titleBox">
        <div class="title">
          {{ collection.model.resource.title }}
        </div>
        <div class="right">
          <div class="like">
            <svg
              t="1677141543760"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="11970"
              width="32"
              height="32"
            >
              <path
                d="M779.2 881.6h-44.8c-17.6 0-32-14.4-32-32s14.4-32 32-32h44.8c4.8 0 51.2-1.6 62.4-28.8 14.4-36.8 72-264 92.8-347.2 3.2-12.8 11.2-49.6 0-62.4-4.8-4.8-14.4-6.4-20.8-6.4H649.6c-17.6 0-32-14.4-32-32s14.4-32 32-32H912c38.4 0 60.8 16 70.4 30.4 30.4 36.8 17.6 91.2 12.8 116.8v1.6c-8 32-76.8 307.2-94.4 355.2-19.2 51.2-76.8 68.8-121.6 68.8z"
                fill="#8a8a8a"
                p-id="11971"
              ></path>
              <path
                d="M331.2 480c-12.8 0-24-8-30.4-20.8-6.4-16 1.6-35.2 17.6-41.6 24-9.6 44.8-27.2 57.6-49.6l8-14.4c35.2-62.4 57.6-134.4 67.2-214.4 1.6-11.2 4.8-20.8 6.4-27.2 9.6-27.2 46.4-56 92.8-59.2 30.4-1.6 86.4 8 126.4 92.8 64 136 0 212.8-3.2 216-11.2 12.8-32 14.4-44.8 3.2-12.8-11.2-14.4-32-3.2-44.8 1.6-1.6 38.4-51.2-6.4-147.2-11.2-24-32-54.4-60.8-56-20.8-1.6-36.8 11.2-40 17.6 0 0-1.6 4.8-1.6 14.4-9.6 88-35.2 168-75.2 238.4l-8 12.8c-19.2 35.2-51.2 64-89.6 78.4-4.8 1.6-8 1.6-12.8 1.6zM777.6 881.6H500.8c-20.8 0-40-3.2-59.2-11.2-52.8-19.2-128-48-128-48l22.4-59.2 128 48c11.2 4.8 24 6.4 36.8 6.4h276.8c17.6 0 32 14.4 32 32s-14.4 32-32 32z"
                fill="#8a8a8a"
                p-id="11972"
              ></path>
              <path
                d="M294.4 902.4H97.6c-30.4 0-54.4-25.6-54.4-56V393.6c0-27.2 20.8-65.6 54.4-65.6h196.8c20.8 0 46.4 17.6 46.4 65.6v452.8c0 41.6-24 56-46.4 56z m-187.2-64h169.6V393.6v-1.6H107.2V838.4z"
                fill="#8a8a8a"
                p-id="11973"
              ></path>
            </svg>
            <div class="like_count">
              {{ collection.model.resource.count.count_like }}
            </div>
          </div>
          <svg
            t="1677136516616"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4040"
            width="32"
            height="32"
          >
            <path
              d="M512 704c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m-64-192c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z m0-256c0 35.2 28.8 64 64 64s64-28.8 64-64-28.8-64-64-64-64 28.8-64 64z"
              p-id="4041"
              fill="#999999"
            ></path>
          </svg>
        </div>
      </div>
      <div class="author">
        <div class="avatar">
          <van-image
            width="25"
            height="25"
            lazy-load
            round
            :src="collection.model.resource.avatar"
          />
        </div>
        <div class="username">
          {{ collection.model.resource.username }}
        </div>
        <div class="follow">关注</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["collection"],
  filters: {
    time: function (text) {
      let minute =
        Math.floor(text / 60) < 10
          ? `0${Math.floor(text / 60)}`
          : Math.floor(text / 60);
      let second = text % 60 < 10 ? `0${text % 60}` : text % 60;
      return `${minute}'${second}''`;
    },
    formatter: function (value) {
      if (value >= 1000 && value < 10000) {
        value = (value / 1000).toFixed(1) + "k";
      }
      if (value >= 10000 && value < 10000000) {
        value = (value / 10000).toFixed(1) + "w";
      }
      return value;
    },
  },
};
</script>

<style lang="scss" scoped>
.collectionSlide {
  border-radius: 10px;
  background-color: white;
  margin-bottom: 8px;

  .img {
    position: relative;

    .countBox {
      position: absolute;
      bottom: 10px;
      right: 5%;
      width: 95%;
      display: flex;
      justify-content: end;
      align-items: center;

      div {
        color: white;
        font-size: 14px;
      }

      .line {
        margin: 0 6px;
      }
    }
  }

  .buttom {
    padding: 0 10px;

    .titleBox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid #999;

      .title {
        font-size: 17px;
        font-weight: bold;
      }

      .right {
        display: flex;
        justify-content: space-between;

        .icon {
          width: 22px;
        }

        .like {
          position: relative;
          margin-right: 15px;

          .like_count {
            position: absolute;
            top: -4px;
            right: -9px;
            font-size: 12px;
            color: #999;
          }
        }
      }
    }

    .author {
      display: flex;
      align-items: center;
      padding: 13px 0;

      .avatar {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        margin-right: 8px;
      }

      .username {
        font-size: 14px;
        margin-right: 8px;
      }

      .follow {
        margin-left: 15px;
        font-size: 13px;
        font-weight: bold;
        color: red;
      }
    }
  }
}
</style>
